<template>
    <div>
        <div class="topBar-container" :class="{fixed: fixed}" :style="{'backgroundColor':bgColor}">
            <!--状态栏开始-->
            <div class="topBar"  :style="{'height': this.isBangScreenSta == 1 ? '42px' : '20px','backgroundColor':bgColor}"></div>
            <!--状态栏结束-->
            <!--导航栏开始-->
            <van-nav-bar  :class="{arrowBlack,arrowWhite}" :style="{'backgroundColor':bgColor}" :border="border" :title="title" :left-arrow="leftArrow"  @click-left="onClickLeft" @click-right="onClickRight">
                <!--中间区域内容开始-->
                <span slot="title" v-if="!title"><slot name="title"></slot></span>
                <!--中间区域内容结束-->
                <!--右侧区域内容开始-->
                <span slot="right"><slot name="right"> </slot></span>
                <!--右侧区域内容结束-->
            </van-nav-bar>
            <!--导航栏结束-->
            <!--底部插槽开始-->
            <slot name="footer"></slot>
            <!--底部插槽结束-->
        </div>

        <!--导航占用开始-->
        <div style="background-color: transparent;" :style="{height: topHeight + 'px'}"></div>
        <!--导航占用结束-->
    </div>



</template>

<script>
    /**
     * 顶部状态栏
     *
     * 插槽部分
     * right    自定义右侧区域内容
     * footer   自定义底部区域内容
     */


    import Vue from 'vue';
    import { NavBar } from 'vant';
    Vue.use(NavBar);

    import { Sticky } from 'vant';
    Vue.use(Sticky);


    import {isIphoneX,isiOS} from "../utils/common";

    export default {
        name: "TopBar",
        props:{
            title:{  //标题
                type: String,
                default: '',
            },
            fixed:{   //是否固定在顶部
                type: Boolean,
                default: true
            },
            bgColor:{   //导航背景颜色 透明色（transparent）
                type: String,
                default: '#ffffff'
            },
            arrowBlack:{  //左侧返回的颜色: 黑色
                type: Boolean,
                default: true
            },
            arrowWhite:{  //左侧返回的颜色: 白色
                type: [Boolean,String],
                default: ''
            },
            border: {     //是否显示下边框
                type: Boolean,
                default: false
            },
            leftArrow: {   //是否显示左侧返回
                type: Boolean,
                default: true
            }
        },
        data(){
            return {
                isiOS,
                isBangScreenSta: 0,
                topHeight: 0,
            }
        },
        mounted(){
            //是否是iphoneX(齐刘海)
            isIphoneX( data =>{
                this.isBangScreenSta = data;
            });
            setTimeout(()=>{
                this.topHeight = document.getElementsByClassName("topBar-container")[0].clientHeight;
            },100)
        },
        methods: {
            onClickLeft(){
                this.$emit('onClickLeft');
            },
            onClickRight(){
                this.$emit('onClickRight');
            }
        }
    }
</script>

<style scoped lang="less">
    .topBar-container{
        width: 100%;
        z-index: 1000;

    }
    .fixed{
        position: fixed;
        top: 0;
    }
    .van-nav-bar{

    }

    /deep/ .arrowBlack{
        .van-icon{
            font-size: 20px;
            color: #333333;
        }
        .van-nav-bar__title{
            color: #333333;
        }
    }

    /deep/ .arrowWhite{
        .van-icon{
            font-size: 20px;
            color: #ffffff;
        }
        .van-nav-bar__title{
            color: #ffffff;
        }
    }

    .topBar {

        width: 100%;
    }

    /deep/ .van-nav-bar__left{
        padding: 0 8px;
    }
</style>
